<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花样滑冰</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100vh;
            padding: 0 24%;
            background: #f7f7f7;
            overflow-y: hidden;
        }

        .container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: hidden;
            background: #4291a7;
        }

        .banner {
            position: relative;
            width: 100%;
            height: 25%;
            background: pink;
        }

        .banner-img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .img-select {
            display: block;
        }

        .dots {
            position: absolute;
            display: flex;
            bottom: 20px;
            right: 20px;
            width: 120px;
            height: 16px;
            list-style: none;
            gap: 10px;
        }

        .dot {
            width: 14px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            border-radius: 50%;
            background: #fff;
            color: #000;
            text-align: center;
            cursor: pointer;
        }

        .dot-select {
            background: red;
        }

        .logo {
            box-sizing:border-box;
            display: flex;
            align-items: center;
            padding: 0 10px;
            width: 100%;
            height: 5%;
        }

        .logo-img {
            height: 80%;
            object-fit: cover;
            margin-right: 10px;
        }

        .logo-name {
            line-height: 100%;
            color: #fff;
        }



        .nav {
            box-sizing: border-box;
            display: flex;
            padding: 0 30px;
            width: 100%;
            height: 4%;
            list-style: none;
            background: #206e85;
            gap: 12px;
        }

        .nav>li {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 10%;
            height: 100%;
            line-height: 100%;

        }

        .nav>li>a {
            color: #fff;
            text-decoration: none;
        }

        main {
            display:flex;
            flex-direction: column;
            box-sizing: border-box;
            flex: 1;
            width: 100%;
            padding: 10px 30px;
            overflow:auto;
        }

        .section{
            flex:1;
            display:flex;
            flex-direction:column;
        }

        .title {
            width: 100%;
            font-size: 24px;
            line-height: 48px;
            font-weight: 700;
            color: #fff;
            text-align: center;
        }

        .desc {
            font-size: 14px;
            line-height: 24px;
            color: #fff;
        }

        .desc>p {
            text-indent: 2em;
        }

        .img-collections {
            flex:1;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 10px 0;
            width: 100%;
        }

        .img-collections>img {
            width: 140px;
            height: 120px;
        }

        footer {
            display:flex;
            align-items:center;
            width: 100%;
            height: 5%;
            background: #283043;
        }

        .list {
            display:flex;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;
            /* padding:6px 0; */
            list-style: none;
            gap: 12px;
            font-size:14px;
            color:#fff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <div class="banner">
                <img class="banner-img img-select" src="./images/img-01.jpg">
                <img class="banner-img" src="./images/img-02.jpg">
                <img class="banner-img" src="./images/img-03-01.png">
                <ul class="dots">
                    <li class="dot dot-select" onClick="changeImg(0)">1</li>
                    <li class="dot" onClick="changeImg(1)">2</li>
                    <li class="dot" onClick="changeImg(2)">3</li>
                </ul>
            </div>
            <div class="logo">
                <img class="logo-img" src="./images/logo.png">
                <span class="logo-name">花样滑冰</span>
            </div>
            <ul class="nav">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="./star.html">明星简介</a>
                </li>
                <li>
                    <a href="./video.html">视频欣赏</a>
                </li>
                <li>
                    <a href="./tech.html">运动特点</a>
                </li>
                <li>
                    <a href="./login.html">登录页</a>
                </li>
            </ul>
            <main>
                <div class="section">
                    <div class="title">花样滑冰简介</div>
                    <div class="desc">
                        <p>花样滑泳（Figure
                            Skating）是冰上运动项目之一。运动员通过冰刀在冰面上划出图形，并表演跳跃、旋转等高难度动作。花样滑冰的裁判会按照动作的质量与艺术性表现进行综合评分，最高为6分。[1]花样滑冰起源于18世纪的英国，后相继在德国、北美地区国家迅速开展。[17]1892年，国际滑冰联盟在荷兰正式成立，[25]并制定了该项目的比赛规则。1872年奥地利首次举办花样滑冰比赛。1882年，奥地利花样滑冰选手弗列依和他的妻子在维也纳冰场手拉手跳起了双人舞后，诞生了双人滑。1896年在俄国彼得堡举行首次世界男子单人花样滑冰锦标赛。1990年，亚洲滑冰联合会成立。[2]花样滑冰最高级的组织机构为国际滑冰联盟，1892年在荷兰成立。中国最高级的组织机构为中国花样滑冰协会，2018年1月18日在北京成立。
                        </p>
                        <p>花样滑冰，是由单人、双人或团体以冰刀在冰面上表演技术动作的运动。花样滑冰18世纪诞生于英国，是曾经进入真季奥运会的冬季项目，在1924年被列为首届冬奥会比寨项目。
                            19世纪末20世纪初，随着冰雪运动在欧美国家逐渐得到普及和发展，国际奥委会在1908年第4届伦敦奥运会上增加了花样滑冰比赛，引起观众极大兴趣。1920年第7届安特卫普奥运会，除了花样滑冰，又将冰球纳入比赛项目。这届奥运会各项比赛的观众都不多，唯独花样滑冰、冰球比赛是例外，吸引了众多冰上运动爱好者。观众对冰雪比赛项目的喜爱，促使单独举办冬季奥运会的计划再次提上议程。
                        </p>
                    </div>
                </div>
                <div class="section">
                    <div class="title">
                        比赛集锦
                    </div>
                    <div class="img-collections">
                        <img src="./images/img-04.jpg">
                        <img src="./images/img-05.jpg">
                        <img src="./images/img-06.jpg">
                        <img src="./images/img-07.jpg">
                        <img src="./images/img-08.jpg">
                        <img src="./images/img-09.jpg">
                        <img src="./images/img-10.jpg">
                        <img src="./images/img-11.jpg">

                    </div>
                </div>
            </main>

            <footer>
                <ul class="list">
                    <li>邮件反馈</li>
                    <li>企业推广</li>
                    <li>帮助中心</li>
                    <li>版权所有@花样滑冰</li>
                    <li>2024年6月14日</li>
                </ul>
            </footer>
        </div>
    </div>
</body>

<script>
    const dotDoms = document.querySelectorAll('.dot')
    const imgDoms = document.querySelectorAll('.banner-img')
    function changeImg(index) {
        imgDoms.forEach((img, number) => {
            img.classList.remove('img-select')
            if (number === index) {
                img.classList.add('img-select')
            }
        })
        dotDoms.forEach((dot, number) => {
            dot.classList.remove('dot-select')
            if (number === index) {
                dot.classList.add('dot-select')
            }
        })
    }
</script>

</html>